<template>
	<u-popup v-model="show" mode="right" width="100%" border-radius="14">
		<div class="box">
			<div class="box-item" v-if="marketEnable">
				<div class="func-title">商品状态</div>
				<div class="func-content">
					<div class="func-item" @click="handleClickMarketEnableWay(item)" :class="{'active':item.selected}"
						v-for="(item,index) in marketEnableWay" :key="index">
						{{item.label}}
					</div>
				</div>
			</div>
			<div class="box-item" v-if="orderStatus">
				<div class="func-title">订单状态</div>
				<div class="func-content">
					<div class="func-item" @click="handleClickOrderStatus(item)" :class="{'active':item.selected}"
						v-for="(item,index) in orderStatusList" :key="index">
						{{item.label}}
					</div>
				</div>
			</div>
			<div class="box-item" v-if="date" @click="handleClickDate()">
				<div class="func-title">日期选择</div>
				<div class="func-content">
					<u-input placeholder="请选择日期" v-model="dates" @click="handleClickDate()" disabled
						:custom-style="inputStyle"></u-input>
				</div>
			</div>

			<div class="box-item" v-if="memberName">
				<div class="func-title">会员名称</div>
				<div class="func-content">
					<u-input placeholder="请输入会员名称" v-model="params.memberName" :custom-style="inputStyle"></u-input>
				</div>
			</div>
			<div class="box-item" v-if="goodsName">
				<div class="func-title">商品名称</div>
				<div class="func-content">
					<u-input placeholder="请输入商品名称" v-model="params.goodsName" :custom-style="inputStyle"></u-input>
				</div>
			</div>
			<div class="submit" @click="callback">确定</div>
			<div class="clear" @click="clear">清空</div>
		</div>
		<u-calendar v-model="showDate" range-color="#fff" range-bg-color="#333" active-bg-color="#333" mode="range" 
			@change="changedCalendar"></u-calendar>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				marketEnableWay: [{
						value: "DOWN",
						label: "下架",
						selected: false
					},
					{
						value: "UPPER",
						label: "上架",
						selected: false
					},
				],
				show: false, // 默认引入不显示
				showDate: false, //是否默认打开日期选择
				dates: "",
				orderStatusList: [],
				params: {
					orderStatus: "",
					date: [],
					memberName: "",
					goodsName: "",
					marketEnable: ""
				},
				inputStyle: {
					background: "#f7f7f7",
					"padding-left": "20rpx",
					"border-radius": "10rpx",
				},
			};
		},
		props: {
			// 是否显示商品状态
			marketEnable: {
				type: Boolean,
				default: false,
			},
			// 是否显示日期控件
			date: {
				type: Boolean,
				default: false,
			},
			// 是否显示订单状态
			orderStatus: {
				type: Boolean,
				default: false,
			},
			// 是否显示会员名称
			memberName: {
				type: Boolean,
				default: false,
			},
			// 是否显示商品名称
			goodsName: {
				type: Boolean,
				default: false,
			},
			//
		},
		mounted() {
			this.init(); //初始化组件
		},
		methods: {
			// 初始化弹出层
			init() {
				this.orderStatus ? this.bindOrderStatus() : "";
			},
			// 绑定订单状态
			bindOrderStatus() {
				let orderStatus = this.$options.filters.orderStatusWay;
				delete orderStatus.COMPLETE //COMPLETE多余的
				this.orderStatusList = Object.keys(orderStatus).map((item) => {
					return {
						value: item,
						label: orderStatus[item],
						selected: false
					};
				});
			},
			// 点击订单状态
			handleClickOrderStatus(val) {
				this.orderStatusList.map((item) => (item.selected = false));
				val.selected = true;
				this.params.orderStatus = val.value;
			},
			// 点击商品状态
			handleClickMarketEnableWay(val) {
				this.marketEnableWay.map((item) => (item.selected = false));
				val.selected = true;
				this.params.marketEnable = val.value;
			},
			// 点击日期选择
			handleClickDate() {
				this.showDate = true;
			},
			// 回调日期选择
			changedCalendar(val) {
				const {
					startDate,
					endDate
				} = val;
				this.params.date[0] = startDate;
				this.params.date[1] = endDate;
				this.dates = `${startDate} - ${endDate}`;
			},
			// 清空回调信息
			clear() {
				console.log('dd')
				this.orderStatusList.map((item) => (item.selected = false));
				this.marketEnableWay= [{
						value: "DOWN",
						label: "下架",
						selected: false
					},
					{
						value: "UPPER",
						label: "上架",
						selected: false
					},
				],
				this.params.data = [];
				this.params.memberName = "";
				this.params.goodsName = "";
				this.params.orderStatus = "";
				this.params.marketEnable = ""
				this.params.date = []
				this.dates = ""
				this.callback("clear");
			},
			// 回调筛选的信息
			callback(type) {
				/**
				 * 回调会筛选出空值
				 */
				let data = {};
				Object.keys(this.params).forEach((key) => {
					this[key] ? Object.assign(data, {
						[key]: type == "clear" ? "" : this.params[key],
					}) : "";
				});
				this.show = false;
				this.$emit("callback", data);
			},
			// 开启弹出层
			open() {
				this.show = true;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		padding: 34rpx;
		margin: 20rpx 0;
	}

	.box-title {
		font-size: 36rpx;
		color: #999;
	}

	.box-item {
		margin: 40rpx 0;
	}

	.func-content {
		display: flex;
		flex-wrap: wrap;
		margin: 20rpx 0;
	}

	.func-title {
		font-weight: bold;
	}

	.func-item {
		margin: 10rpx;
		font-size: 24rpx;
		background: #f7f7f7;
		border-radius: 10rpx;
		padding: 12rpx 20rpx;
		transition: 0.35s;
	}

	.active {
		background: #333;
		color: #fff;
	}

	/deep/ .u-btn--primary {
		border-color: #333 !important;
		background-color: #333 !important;
	}

	.clear,
	.submit {
		border-radius: 20rpx;
		height: 70rpx;

		text-align: center;
		margin: 80rpx auto 0 auto;
		line-height: 70rpx;
	}

	.submit {
		background: #333;
		color: #fff;
	}

	.clear {
		box-sizing: border-box;
		border: 2rpx solid #333;
		color: #333;
		margin: 20rpx auto 0 auto;
	}
</style>
